<template>
  <div class="template">
    <div class="marketing-activities-head">
        <p :class="diyDom.type==1?'on':''" @click="getTableNav(1)"><img src="../../assets/images/ant-design.png" >消费累计满赠</p>
        <p :class="diyDom.type==2?'on':''" @click="getTableNav(2)"><img src="../../assets/images/ant-design.png" >限时秒杀</p>
         <p :class="diyDom.type==3?'on':''" @click="getTableNav(3)"><img src="../../assets/images/ant-design.png" >爆款商品</p>
          <p :class="diyDom.type==4?'on':''" @click="getTableNav(4)"><img src="../../assets/images/ant-design.png" >新品商品</p>
    </div>
    
    <template v-if="diyDom.type==1">
      <template v-if="!diyData.isEdit">
        <div class="table">
          <Table
            :columns="diyData.columns"
            :data="apiData.tableList"
          >
          </Table>
        </div>
        <div class="seckillfooter">
           <Button type="primary" @click="addFullgift">新增满赠</Button>
        </div>
      </template>
      <template v-else>
        <Form
          ref="editFullgift"
          :model="FullgiftForm"
          :rules="diyData.rules"
          :label-width="120"
        >
         <!-- <FormItem label="活动开关：" prop="status">
               <i-switch size="large" true-value="1" false-value="2" v-model="FullgiftForm.status">
                  <span slot="open">开</span>
                  <span slot="close">关</span>
              </i-switch>
        </FormItem> -->
         <FormItem label="活动状态：" prop="active">
            <Select v-model="FullgiftForm.status" clearable filterable style="width:250px" >
                <Option value="1">进行中</Option>
                <Option value="2">暂停中</Option>
                <Option value="3">已过期</Option>
                <Option value="4">已作废</Option>
              </Select>
      </FormItem>
        <FormItem label="活动时间：" prop="beginTime">
           <Date-picker
                    ref="brithdayPicker"
                    type="datetime"
                    clearable
                    v-model="FullgiftForm.beginTime"
                    placeholder="请选择时间"
                    style="width:150px"
                  ></Date-picker>
                  <span style="margin:0px 10px"> 至</span>
                  <Date-picker
                    ref="brithdayPicker"
                    type="datetime"
                    clearable
                    v-model="FullgiftForm.endTime"
                    placeholder="请选择时间"
                    style="width:150px"
                  ></Date-picker>
        </FormItem>
        <FormItem label="满赠条件：" prop="productId">
          <div v-for="(item,index) in FullgiftForm.list" :key="index" style="margin-bottom:10px">
            <span>累计消费满</span><Input
                  placeholder="请输入"
                  v-model="item.amount"
                  style="width:80px;margin:0px 10px"
                />
                <span style="margin-left:30px;margin-right:10px">赠送商品</span>
              <Select v-model="item.productIds" clearable multiple filterable style="width:250px" >
                <Option v-for="items in apiData.productList" :value="items.id+''" :key="items.id">{{ items.title }}</Option>
              </Select>
               <Button v-if="index>0" style="margin-left: 10px" @click="deletFullgift(index)">删除</Button>
          </div>
          <p @click="addFullgiftShop()" class="addseckillShop">+ 新增满赠条件</p>

        </FormItem>
        <FormItem label="活动介绍：" prop="introduction">
          <editor  ref="editor" v-model="FullgiftForm.introduction" editorId="content" @on-change="editChange" />
        </FormItem>
        </Form>
        <div class="seckillfooter">
          
          <Button  @click="closeFullgift" style="margin-right: 10px">取消</Button>
           <Button type="primary" @click="sureFullgift">确认 </Button>
        </div>
      </template>
      
       
    </template>
    <template v-if="diyDom.type==2">
      <Form
        ref="editSeckillForm"
        :model="seckillForm"
        :rules="diyData.rules"
        :label-width="120"
      >
      <FormItem label="活动开关：" prop="active">
         <i-switch size="large" true-value="1" false-value="0" v-model="seckillForm.active">
                <span slot="open">开</span>
                <span slot="close">关</span>
            </i-switch>
      </FormItem>
        <FormItem label="活动时间：" prop="beginTime">
           <Date-picker
                    ref="brithdayPicker"
                    type="datetime"
                    clearable
                    v-model="seckillForm.beginTime"
                    placeholder="请选择时间"
                    style="width:150px"
                  ></Date-picker>
                  <span style="margin:0px 10px"> 至</span>
                  <Date-picker
                    ref="brithdayPicker"
                    type="datetime"
                    clearable
                    v-model="seckillForm.endTime"
                    placeholder="请选择时间"
                    style="width:150px"
                  ></Date-picker>
        </FormItem>
        <FormItem label="秒杀商品：" prop="productId">
          <div class="seckillForm-shop" v-for="(item,index) in seckillForm.list" :key="index" style="margin-bottom:10px">
              <Select v-model="item.productId" clearable filterable style="width:250px" >
                <Option v-for="items in apiData.productNoSkuList" :value="items.id+''" :key="items.id">{{ items.title }} ￥{{items.price}}</Option>
              </Select>
              <span style="margin-left:30px">秒杀价：</span>
              <Input
                  placeholder="请输入"
                  v-model="item.amount"
                  style="width:80px;margin:0px 10px"
                />
                <Button v-if="index>0" @click="deletDeckill(index)">删除</Button>
                <img v-if="index!=0" @click="getSonSort(index,'up','active')" src="@/assets/images/arrow_up.png">
                <img v-if="index<seckillForm.list.length-1" @click="getSonSort(index,'down','active')" src="@/assets/images/arrow_down.png">
               
          </div>
          <p @click="addseckillShop()" class="addseckillShop">+ 增加秒杀商品</p>

        </FormItem>
      </Form>
       <div class="seckillfooter">
           <Button
              type="primary"
              @click="getSeckillConfirm"
              >确认</Button
            >
        </div>
    </template>
     <template v-if="diyDom.type==3">
      <Form
        ref="editSeckillForm"
        :label-width="120"
      >
        <FormItem label="爆款商品：" prop="productId">
          <div class="seckillForm-shop" v-for="(item,index) in hotsForm" :key="index" style="margin-bottom:10px">
              <Select v-model="item.productId" clearable filterable style="width:250px;margin-right:10px" >
                <Option v-for="items in apiData.productList" :value="items.id+''" :key="items.id">{{ items.title }} ￥{{items.price}}</Option>
              </Select>
                <Button  @click="deletHost(index)">删除</Button>
                <img v-if="index!=0" @click="getSonSort(index,'up','host')" src="@/assets/images/arrow_up.png">
                <img v-if="index<hotsForm.length-1" @click="getSonSort(index,'down','host')" src="@/assets/images/arrow_down.png">
               
          </div>
          <p @click="addHostShop()" class="addseckillShop">+ 增加爆款商品</p>

        </FormItem>
      </Form>
       <div class="seckillfooter">
           <Button
              type="primary"
              @click="getHostConfirm"
              >确认</Button
            >
        </div>
    </template>
    <template v-if="diyDom.type==4">
      <Form
        ref="editSeckillForm"
        :model="seckillForm"
        :rules="diyData.rules"
        :label-width="120"
      >
        <FormItem label="新品商品：" prop="productId">
          <div class="seckillForm-shop" v-for="(item,index) in newestForm" :key="index" style="margin-bottom:10px">
              <Select v-model="item.productId" clearable filterable style="width:250px;margin-right:10px" >
                <Option v-for="items in apiData.productList" :value="items.id+''" :key="items.id">{{ items.title }} ￥{{items.price}}</Option>
              </Select>
              <Button  @click="deletNewest(index)">删除</Button>
              <img v-if="index!=0" @click="getSonSort(index,'up','newest')" src="@/assets/images/arrow_up.png">
              <img v-if="index<newestForm.length-1" @click="getSonSort(index,'down','newest')" src="@/assets/images/arrow_down.png">
               
          </div>
          <p @click="addNewestShop()" class="addseckillShop">+ 增加新品商品</p>

        </FormItem>
      </Form>
       <div class="seckillfooter">
           <Button
              type="primary"
              @click="getNewestConfirm"
              >确认</Button
            >
        </div>
    </template>
  </div>
</template>

<script>
import Editor from "_c/editor";
import { getLoaclTime } from '@/libs/util'
import {
    apiFullgiftactivityList,
    apiFullgiftactivitySave,
    apiFullgiftactivityInfo,
    apiMarketingactivityAllProductNoSku,
    apiFullgiftactivityChangeStatus,
    apiMarketingactivityAllProduct,
    apiMarketingactivityAeckill,
    apiFullgiftactivityDetele,
    apiMarketingactivitySave,
    apiMarketingactivityGetHots,
    apiMarketingactivitySaveHost,
    apiMarketingactivityGetNewest,
    apiMarketingactivitySaveNewest,  
    } from '@/api/marketing-activities.js'
export default {
  name: 'marketing-activities',
   components: { Editor },
  data () {
    return {
       query:{},
      
      diyDom:{
        type:1,//消费累计满赠,2限时秒杀
      },
      seckillForm:{
        active:'1',
        beginTime:'',
        endTime:'',
        list:[{
          amount:'',
          productId:'',
        }],
      },
      hotsForm:[],
      newestForm:[],
      // seckillObj:{
      //   amount:'',
      //   productId:''
      // },
       FullgiftForm:{
        beginTime:'',
        endTime:'',
        list:[],
        introduction:'',
        status:'',
        title:'',
      },
      diyData: {
        id:'',
        rules:{},
        isEdit:false,
        columns: [
 
           {
            title: 'ID',
            key:'id',
          },
          {
            title: '开始时间',
            key: 'beginTime',
          },
          {
            title: '结束时间',
            key: 'endTime',
          },
         {
            title: '状态',
            key: 'statusName',
            render: (h, params) => {
              var html = []
              switch (params.row.status) {
                case 1:
                  html.push(h('span',{
                    style: {color:'#2A82E4',
                    }
                  },'生效中'))
                  break
                case 2:
                  html.push(h('p',{
                    style: {color:'#D43030'}
                  },'暂停中'))
                  break
                case 3:
                  html.push(h('p',{
                    style: {color:'#808080'}
                  }, '已过期'))
                  break
                  case 4:
                  html.push(h('p',{
                    style: {color:'#808080'}
                  }, '已作废'))
                  break
              }
              return h('div',html)
            }
          },
          {
            title: '操作',
            width:'150px',
            fixed: 'right',
            render: (h, params) => {
                  return h('div', [
                      h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'14px',
                          },
                          on: {
                              click: () => {
                                  this.diyData.isEdit=true
                                  apiFullgiftactivityInfo({id:params.row.id}).then(res=>{
                                    this.diyData.id=params.row.id
                                    this.FullgiftForm={
                                        beginTime:res.data.beginTime,
                                        endTime:res.data.endTime,
                                        list:res.data.list.map(res=>{
                                          return {
                                            amount:res.amount,
                                            productIds:res.products&&res.products.length>0?res.products.map(ress=>{
                                              return ress.id+''}):[],
                                          }
                                        }),
                                        introduction:res.data.introduction,
                                        status:res.data.status+'',
                                        title:res.data.title,
                                      }
                                      console.log(this.FullgiftForm,'this.FullgiftFormthis.FullgiftForm')
                                      this.$refs.editor.setHtml(res.data.introduction);
                                  })
                              }
                          },                            
                        },
                      '详情'
                      ),
                      h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              display:params.row.status==1||params.row.status==2?'':'none',
                              fontSize:'14px',
                          },
                          on: {
                              click: () => {
                                this.$Modal.confirm({
                                    title: '提示',
                                    content: '确认作废？',
                                    onOk: () => {
                                        apiFullgiftactivityChangeStatus({
                                            id: params.row.id,
                                            status:4,
                                        }).then(res => {
                                            this.$Message.success('操作成功');
                                            this.getTableList();
                                        });
                                    }
                                });
                              }
                          },                            
                        },
                      '作废'
                      ),
                      h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              display:params.row.status==4?'':'none',
                              fontSize:'14px',
                          },
                          on: {
                              click: () => {
                                this.$Modal.confirm({
                                    title: '提示',
                                    content: '确认删除？',
                                    onOk: () => {
                                        apiFullgiftactivityDetele({
                                            id: params.row.id
                                        }).then(res => {
                                            this.$Message.success('操作成功');
                                            this.getTableList();
                                        });
                                    }
                                });
                              }
                          },                            
                        },
                      '删除'
                      ),
                  ])
                }
          },
        ]
      },
      apiData: {
        productList:[],
        tableList: [], 
        productNoSkuList:[]
      }
    }      
  },
  methods: {
    //秒杀所有产品
    getAllProduct(){
      apiMarketingactivityAllProduct().then(res => {
        this.apiData.productList = res.data;
      });
    },
    //秒杀产品-没有规格
    getProductNoSku(){
      apiMarketingactivityAllProductNoSku().then(res => {
        this.apiData.productNoSkuList = res.data;
      });

    },
   //满赠活动列表
    getTableList(){
      this.$store.commit('setSpinShow', true)
      apiFullgiftactivityList().then((res) => {
        this.apiData.tableList = res.data.list
      }).finally(() => this.$store.commit('setSpinShow', false))
    },
    addFullgift(){
      this.diyData.isEdit=true
      this.$refs.editor.setHtml("");
      this.FullgiftForm= {
        beginTime:'',
        endTime:'',
        list:[],
        introduction:'',
        status:'',
        title:'',
      }
    },
    closeFullgift(){
      this.diyData.isEdit=false
      this.diyData.id=''
      this.FullgiftForm= {
        beginTime:'',
        endTime:'',
        list:[],
        introduction:'',
        status:'',
        title:'',
      }
    },
    deletFullgift(index){
      this.FullgiftForm.list.splice(index,1)
    },
    addFullgiftShop(){
      this.FullgiftForm.list.push({
        amount:'',
        productIds:[],
      })
    },
 editChange(res, text) {
      if (res == "<p><br></p>") {
        this.FullgiftForm.introduction = text;
        return;
      }
      this.FullgiftForm.introduction = res;
    },
    //保存满减
    sureFullgift(){
      var obj=this.FullgiftForm
       obj.beginTime=getLoaclTime(obj.beginTime)
       obj.endTime=getLoaclTime(obj.endTime)
       obj.list=this.FullgiftForm.list.map(item=>{
        console.log(item,'itemitemitemitemimiteitemitemitemitem')
          item.productIds=item.productIds.join(',')
          return item
       })
       if(this.diyData.id){
        obj.id=this.diyData.id
       }
       apiFullgiftactivitySave(obj).then(res=>{
         if(res.code==200){
          this.$Message.success("保存成功");
          this.getTableList()
          this.diyData.isEdit=false
           this.diyData.id=''
         }
       })

    },
    getMarketingactivityAeckill(){
        apiMarketingactivityAeckill().then(res=> {
          this.seckillForm={
              active:res.data.active+'',
              beginTime:res.data.beginTime+'',
              endTime:res.data.endTime+'',
              list:res.data.list.map(item=>{
                return {
                  amount:item.amount,
                  productId:item.product?item.product.id+'':''
                }
              })
            }
        });
    },
    addseckillShop(){
      this.seckillForm.list.push({
         amount:'',
          productId:'',
      })
    },
    addHostShop(){
      this.hotsForm.push({
        productId:'',
      })
    },
    addNewestShop(){
      this.newestForm.push({
        productId:'',
      })
    },
    deletDeckill(index){
this.seckillForm.list.splice(index,1)
    },
    deletHost(index){
this.hotsForm.splice(index,1)
    },
     deletNewest(index){
this.newestForm.splice(index,1)
    },
    
    getSeckillConfirm(){
      var obj={...this.seckillForm}
       obj.beginTime=getLoaclTime(obj.beginTime)
       obj.endTime=getLoaclTime(obj.endTime)
      apiMarketingactivitySave(obj).then(res=> {
        this.$Message.success('保存成功')
        this.getMarketingactivityAeckill()
      });
    },
    getHostConfirm(){
      var obj=this.hotsForm.map(item=>item.productId)
      apiMarketingactivitySaveHost(obj).then(res=> {
        this.$Message.success('保存成功')
        this.getMarketingactivityHots()
      });
    },
     getNewestConfirm(){
      var obj=this.newestForm.map(item=>item.productId)
      apiMarketingactivitySaveNewest(obj).then(res=> {
        this.$Message.success('保存成功')
        this.getMarketingactivityAeckill()
      });
    },
    //切换
    getTableNav(type){
        this.diyDom.type=type
        this.diyData.isEdit=false
        if(this.diyDom.type==1){
            this.getTableList()
        }else if(this.diyDom.type==2){
            this.getMarketingactivityAeckill()
        }else if(this.diyDom.type==3){
            this.getMarketingactivityHots()
        }else if(this.diyDom.type==4){
            this.getMarketingactivityNewest()
        }
    },
    getMarketingactivityHots(){
      apiMarketingactivityGetHots().then(res => {
          this.hotsForm = res.data.map(row=>{
            var obj={
              productId:row.id+'',
            }
            return obj
          })
      });
    },
    getMarketingactivityNewest(){
      apiMarketingactivityGetNewest().then(res => {
          this.newestForm = res.data.map(row=>{
            var obj={
              productId:row.id+'',
            }
            return obj
          })
      });
    },
    getSonSort(index,type,name){
      var jsonArray=[]
      if(type=='down'){
        if(name=='active'){
          jsonArray= this.swapAdjacent(this.seckillForm.list, index)
        }else if(name=='host'){
          jsonArray= this.swapAdjacent(this.hotsForm, index)
        }else if(name=='newest'){
          jsonArray= this.swapAdjacent(this.newestForm, index)
        }
       
      }else{
        if(name=='active'){
          jsonArray=  this.swapAdjacent(this.seckillForm.list, index-1)
        }else if(name=='host'){
         
          jsonArray= this.swapAdjacent(this.hotsForm, index-1)
           console.log(jsonArray,111)
        }else if(name=='newest'){
          jsonArray= this.swapAdjacent(this.newestForm, index-1)
        }
      }
       if(name=='active'){
         this.seckillForm.list=jsonArray.map(item=>item)
        }else if(name=='host'){
          this.hotsForm=jsonArray.map(item=>item)
        }else if(name=='newest'){
           this.newestForm=jsonArray.map(item=>item)
        }
      
    },
    swapAdjacent(jsonArray, i) {
        if (i >= 0 && i < jsonArray.length - 1) {
          [jsonArray[i], jsonArray[i + 1]] = [jsonArray[i + 1], jsonArray[i]];
        }
        return jsonArray;
      }
  },
   mounted () {
    this.getAllProduct()
    this.getProductNoSku()
    
    if(this.diyDom.type==1){
        this.getTableList()
    }else if(this.diyDom.type==2){
            this.getMarketingactivityAeckill()
        }else if(this.diyDom.type==3){
            this.getMarketingactivityHots()
        }else if(this.diyDom.type==4){
            this.getMarketingactivityNewest()
        }
    
  },
}
</script>

<style scoped lang="less">
.template{
  width: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  .marketing-activities-head{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    p{
        margin-right: 40px;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 22px;
        color: rgba(0, 0, 0, 0.65);
        text-align: left;
         display: flex;
        align-items: center;
        padding-bottom: 10px;;
        cursor: pointer;
        img{
            width: 12px;
            height: 12x;
            display: block;
            margin-right: 10px;
        }
    }
    p.on{
        color: rgba(0, 145, 255, 1);
        border-bottom: 2px solid rgba(0, 145, 255, 1);;
    }
  }
  .addseckillShop{
    font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 20.27px;
color: rgba(42, 130, 228, 1);
text-align: left;
cursor: pointer;
  }
  .seckillfooter{
    width: 100%;
    margin-top: 100px;
    padding: 15px 0;
    border-top: 1px solid #E5E5E5;
  }
}
.seckillForm-shop{
  width: 100%;
  display: flex;
  align-items: center;
  img{
      width: 16px;
      height: 16px;
      margin-left: 20px;
      display: block;
      cursor: pointer;
  }
}
</style>
 